<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      #box{
          display: flex;
      }
       img{
           width: 360px;
           height: 360px;
       }
    
    </style>
</head>
<body>
    <div id="box" class="dd">
        <div class="item">
            <span>不推荐</span>
            <img src="" alt="">
        </div>
    </div>
    <div class="user-info">
        <div class="name">张三</div>
        <div class="age">20</div>
    </div>
    <div id="tbox"><p>123</p>4</div>
    <input type="text" id="ipt" value="123123" placeholder="请输入内容">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $('#box').addClass('active')
        $('#box').removeClass('active')
        $('#box').toggleClass('dd')
        $('#box').html("<a>链接</a>") // innerHTML
        console.log($('#tbox').text())  // ele.innerTEXT
        console.log($('#ipt').val()) //  ele.value
        $('#box').hide();  
        $('#box').show();
        //list
        $.ajax({
            method:"get",
            url:"http://127.0.0.1:7001/get_banner",
            success:function(res){
                if(res.status == 200){
                    var list = res.data.list; //array
                    var htmlStr = '';
                    list.map(function(v){
                        htmlStr+= '<div class="item" data-status="'+v.status+'"><span></span>'
                                +'<img src="'+v.url+'" alt=""></div>'
                    });
                    $('#box').html(htmlStr);
                    $('.item').each(function(){
                        var msg =  $(this).data('status') == 1 ? '推荐' : '不推荐'
                        $(this).find('span').html(msg);
                    })

                    var userInfo = res.data.userInfo;

                    // js 引擎    dom引擎   
                }
            }
        })
        //
        var arrmp = [{status:1,id:2},{status:2,id:3},{status:1,id:5}]; // 2,5
        var str = (arrmp.filter(function(v){return v.status == 1})).map(function(v){return v.id}).join('-');
        var str = (arrmp.filter(v => v.status == 1)).map(v => v.id).join(',');
        console.log(str)
        // 函数式编程
        // dt
        // $.ajax({
        //     method:"get",
        //     url:"http://127.0.0.1:7001/get_userinfo",
        //     success:function(res){
        //         if(res.status == 200){
        //             console.log(res)
        //             // js 引擎    dom引擎   
        //             var dt = res.data.userInfo;
        //             $('.name').html(dt.name);
        //             $('.age').html(dt.age);
        //         }
        //     }
        // })
    </script>
</body>
</html>